<template>
    <el-table
            ref="multipleTable"
            border
            v-if="tableData.length >0"
            :height="tableHeight"
            :data="tableData"
            @selection-change="handleSelectionChange"
            style="width: 100%">
        <el-table-column
                type="selection"
                v-if="!listType && buttonPageObj['warningInfo.delete']"
                width="55">
        </el-table-column>
        <el-table-column
                width="50px"
                label="等级">
            <template slot-scope="data">
                <div><span v-if="data.row.levelId!=0" class="warningBall" :style="{'background-color':levelColor[data.row.alertLevel.level - 1]}">{{data.row.alertLevel.level}}</span><span v-else>正常</span></div>
            </template>
        </el-table-column>
        <el-table-column
                width="100px"
                prop="time"
                label="时间">
        </el-table-column>
        <el-table-column
                width="100px"
                label="处理时间">
            <template slot-scope="data">
                <div v-if="data.row.status!=0">
                    {{data.row.updateTime}}
                </div>
                <div v-else>
                    未处理
                </div>
            </template>
        </el-table-column>
        <el-table-column
                width="300px"
                prop="project.name"
                label="所属项目">
        </el-table-column>
        <el-table-column
                prop="pointName"
                width="180px"
                label="所属测点">
        </el-table-column>
        <el-table-column
                width="90px"
                label="告警类型">
            <template slot-scope="data">
                <div v-if="data.row.levelId!=0&&data.row.alertRuleDetail">{{getType(data.row.alertRuleDetail.type)}}</div><div v-if="data.row.levelId==0">恢复正常</div>
                <div v-if="data.row.levelId!=0&&!data.row.alertRuleDetail">预警</div>
            </template>
        </el-table-column>
        <el-table-column
                prop="info"
                label="内容">
        </el-table-column>
        <el-table-column
                width="150px"
                label="操作">
            <template slot-scope="data">
                <el-button size="mini" type="text" @click="clickItem(data.row)"><i class="el-icon-search"></i>查看</el-button>
                <el-button v-if="!listType && buttonPageObj['warningInfo.delete']" size="mini" type="text" @click="deleteItem(data.row)"><i class="el-icon-delete"></i>删除</el-button>
            </template>
        </el-table-column>
    </el-table>
</template>

<script>
    import { mapGetters } from 'vuex'

    export default {
        props:{
            tableData:{
                type:Array,
                default(){
                    return []
                }
            },
            tableHeight:{
                type:Number,
                default:0
            },
            listType:{
                type:Boolean,
                default:true
            }
        },
        data() {
            return{
                multipleSelection:[],
                levelColor : ['#e40000','#ff8a00','#ffde00','#1482f0']
            }
        },
        computed: {
            // 使用对象展开运算符将 getter 混入 computed 对象中
            ...mapGetters([
                'buttonPageObj'
            ])
        },
        methods:{
            getType(type){
                switch(type){
                    case 1:
                        return '阈值'
                        break
                    case 2:
                        return '趋势'
                        break;
                    case 3:
                        return '突变'
                        break;
                    case 4:
                        return '关联'
                        break;
                    case 5:
                        return '预警'
                        break;
                }
            },
            clickItem(item){
                this.$emit('clickItem',item)
            },
            deleteItem(item) {
                this.$emit('deleteItem', item)
            },
            handleSelectionChange(val) {
                this.multipleSelection = val;
            }
        }
    }
</script>

<style lang="scss" scoped>
    .warningBall{
        color:#fff;
        display: inline-block;
        width:20px;
        height:20px;
        line-height: 20px;
        font-size:18px;
        text-align: center;
        border-radius: 10px;
    }
</style>
